/*
 * @Author: xiaosihan 
 * @Date: 2023-11-30 23:22:37 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-07 00:57:10
 */


import { DesignTemplateDate } from "#/type";
import utilsServer from "@/api/services/utilsServer";
import { Input, Modal } from "antd";
import { autorun, toJS } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import LeftMenu from "./LeftMenu/LeftMenu";
import DesignTemplateColorPickCanvas from "./RightMenu/DesignTemplateColorPickCanvas/DesignTemplateColorPickCanvas";
import RightMenu from "./RightMenu/RightMenu";
import styles from "./designTemplateEditor.module.less";
import designTemplateEditorStore from "./designTemplateEditorStore";
import designTemplateEditor from "./designTemplateEditorer";
interface Iprops {
  children?: ReactNode
  onOk: (design_template: DesignTemplateDate) => void
}

// 设计模版编辑器
export default function DesignTemplateEditor(props: Iprops) {

  const dom = useRef<HTMLDivElement | null>(null);
  const [data, setData] = useState({});
  const [uploading, setUploading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [open, setOpen] = useState(designTemplateEditorStore.open);
  const [design_template, setDesign_template] = useState(toJS(designTemplateEditorStore.design_template));

  useEffect(() => autorun(async () => {

  }), []);

  useEffect(() => autorun(async () => {
    const { open } = designTemplateEditorStore;
    setOpen(open);
    if (open) {
      await new Promise(resolve => setTimeout(resolve, 200));
      const design_template = toJS(designTemplateEditorStore.design_template);
      setDesign_template(design_template);
      designTemplateEditor.fabricCanvas.loadFromJSON(design_template.designData || {}, () => {
        designTemplateEditor.render();
      });
    }
  }), []);

  // 取消
  const cancel = () => {
    setSaving(false);
    designTemplateEditorStore.close();
  }

  //保存
  const save = async () => {
    setSaving(true);
    const blob = await new Promise<Blob>((resolve, reject) => {
      designTemplateEditor.fabricCanvas.getElement().toBlob(blob => {
        resolve(blob as Blob);
      }, "image/png", 1);
    });
    const file = new File([blob], 'test.png', { type: blob.type });
    const uploadUrl = await utilsServer.uploadOss(file);
    if (!uploadUrl) return;
    design_template.thumb = uploadUrl;
    //@ts-ignore
    design_template.designData = JSON.stringify(designTemplateEditor.toJSON());
    props.onOk(design_template);
    // const updateResult = await designTemplateMangeStore.upload_design_template(design_template);
    designTemplateEditorStore.close();
    setSaving(false);
  }

  return (
    <Modal
      open={open}
      width="1120px"
      okText="保存并关闭"
      confirmLoading={saving}
      onCancel={() => cancel()}
      onOk={save}
      centered={true}
    >
      <div className={styles.designTemplateEditor} >

        {/* 模板编辑器的左侧菜单 */}
        <LeftMenu />

        <div className={styles.center} >
          {/* 模板名称 */}
          <Input
            key={design_template.name}
            addonBefore="设计模板名称"
            placeholder="请输入设计模板名称"
            rootClassName={styles.name}
            defaultValue={design_template.name}
            onChange={(e) => {
              design_template.name = e.target.value;
            }}
          />
          <div ref={dom => designTemplateEditor.setContainer(dom)} className={styles.editot_container}></div>
          <DesignTemplateColorPickCanvas />
        </div>

        <div className={styles.right} >
          <RightMenu />
        </div>

      </div>
    </Modal>
  );

}
